<template>
  <div>
    <!-- 顶部轮播图 -->
    <swiper indicator-dots class="pics" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
      <swiper-item :key='item.pics_id' v-for='item in detail.pics'>
        <image :src='item.pics_big_url'/>
      </swiper-item>
    </swiper>
    <!-- 基本信息 -->
    <view class="meta">
      <view class="price">￥{{detail.goods_price}}</view>
      <view class="name">{{detail.goods_name}}</view>
      <view class="shipment">快递: {{detail.goods_state===2?'免邮费': '不包邮'}}</view>
      <text class="collect icon-star">收藏</text>
    </view>
    <!-- 商品详情 -->
    <view class="detail">
      <view :style='{fontSize: 0}' v-html='detail.goods_introduce'></view>
      <!-- <rich-text :style='{fontSize: 0}' :nodes='goods.goods_introduce'></rich-text> -->
    </view>
    <!-- 操作 -->
    <view class="action">
      <button open-type="contact" class="icon-handset">联系客服</button>
      <text class="cart icon-cart" @click='gotoCart'>购物车</text>
      <text class="add" @click='addCart'>加入购物车</text>
      <text class="buy" @click='toBuy'>立即购买</text>
    </view>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '详情',
        // 商品的id
        gid: null,
        // 商品详情数据
        detail: {},
        // 购物车数组
        cart: uni.getStorageSync('mycart') || []
      }
    },
    onLoad(params) {
      // 获取商品列表页面传递过来的商品id
      this.gid = params.gid
      this.loadDetailData()
    },
    methods: {
      gotoCart () {
        // 跳转到购物车页面
        uni.switchTab({
          url: '/pages/cart/index'
        })
      },
      toBuy () {
        // 先加入购物车，再跳转到购物车页面
        this.addCart()
        uni.switchTab({
          url: '/pages/cart/index'
        })
      },
      addCart () {
        // 加入购物车：获取商品的相关信息，然后添加到购物车数组中
        const info = {
          goods_id: this.detail.goods_id,
          goods_name: this.detail.goods_name,
          goods_price: this.detail.goods_price,
          goods_num: 1,
          goods_icon: this.detail.goods_small_logo,
          goods_flag: false
        }
        // 判断购物车中是否已经存在某个商品
        const flag = this.cart.some(item => {
          return item.goods_id === this.detail.goods_id
        })
        if (flag) {
          // 购物车商品已经存在，商品数量加一
          this.cart.some(item => {
            if (item.goods_id === this.detail.goods_id) {
              item.goods_num += 1
              // 终止继续遍历
              return true
            } else {
              return false
            }
          })
        } else {
          // 把要购买的商品数据添加到购物车
          this.cart.push(info)
        }
        // 把购物车数据缓存起来
        uni.setStorageSync('mycart', this.cart)
        // 添加提示
        uni.showToast({
          title: '添加购物车成功'
        })
      },
      async loadDetailData () {
        // 根据商品id查询商品的详细数据
        const data = await this.$request('goods/detail', {
          goods_id: this.gid
        })
        if (data.meta.status === 200) {
          this.detail = data.message
        } else {
          uni.showToast({
            title: data.meta.msg
          })
        }
      }
    }
  }
</script>
<style lang="less">
  /* 轮播图 */
  .pics {
    height: 640rpx;
    width: 750rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  /* 基本信息 */
  .meta {
    height: 250rpx;
    line-height: 1;
    padding: 30rpx 180rpx 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;

    .price {
      font-size: 36rpx;
      color: #ea4451;
      margin-bottom: 20rpx;
    }

    .name {
      color: #333;
      line-height: 1.4;
      font-size: 33rpx;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .shipment {
      font-size: 27rpx;
      color: #999;
      position: absolute;
      bottom: 30rpx;
    }

    .collect {
      width: 140rpx;
      height: 88rpx;
      text-align: center;
      box-sizing: border-box;
      border-left: 1rpx solid #ddd;
      font-size: 24rpx;
      color: #999;

      position: absolute;
      right: 10rpx;
      top: 91rpx;
    }

    [class*="icon-"]::before {
      display: block;
      font-size: 45rpx;
      margin-bottom: 10rpx;
    }
  }

  /* 详细信息 */
  .detail image {
    width: 100%;
    height: 480rpx;
    margin-top: 20rpx;
    background-color: blue;
  }

  /* 底部菜单 */
  .action {
    width: 100%;
    height: 98rpx;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    text {
      display: block;
    }

    .add, .buy {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 210rpx;
      text-align: center;
      font-size: 27rpx;
      color: #fff;
    }

    .add {
      background-color: #f4b73f;
    }

    .buy {
      background-color: #ea4451;
    }

    button {
      padding: 0;
      border-radius: 0;
      background-color: #fff;

      &::after {
        border: none;
      }
    }

    button, .cart {
      flex: 1;
      text-align: center;
      color: #989898;
      font-size: 24rpx;
      box-sizing: border-box;
    }

    [class*="icon"]::before {
      display: block;
      font-size: 45rpx;
      margin-bottom: 2rpx;
    }
  }
</style>